<template>
  <!--    发票添加-->
  <el-scrollbar height="1035px">
    <div class="vehicle_application">

      <div class="vehicleHead">

        {{propData.edit?'编辑发票':'添加发票'}}
        <span class="tjj-1"><el-button color="#368DF9" :dark="isDark" @click="onSubmit">保存发票</el-button></span>
        <router-link to='/invoicetjj'>
          <el-button color="#626aef" :dark="isDark" class="tjj-2" v-if="!propData.edit">返回</el-button>
        </router-link>
      </div>
      <div class="vehicleForm">

        <div class="tjj-3"> 发票信息</div>
        <span>————————————————————————————————————————————————————————————</span>
        <el-form :model="state.form" label-width="120px"
                 style="  width: 100% ; display: flex;
                          flex-wrap: wrap;
                          justify-content: center;
                          align-items: center;
                          margin-top: 30px;"
        >


          <span>发票类型：</span>
          <el-select class="tbScenBipt-1" v-model="state.form.invoiceType" placeholder="请选择" >
            <el-option label="普通发票" value="普通发票" />
            <el-option label="电子发票" value="电子发票" />
            <el-option label="国际小票" value="国际小票" />
          </el-select>

          <el-form-item label="发票号码:">
            <el-input v-model="state.form.invoiceNumber" style="width: 300px"/>
          </el-form-item>
          <el-form-item label="报销人:">
            <el-input v-model="state.form.invoiceSeller" style="width: 300px"/>
          </el-form-item>
          <el-form-item label="价税合计:">
            <el-input v-model="state.form.invoiceMoney" style="width: 300px"/>
          </el-form-item>
          <el-form-item label="发票状态:">
            <el-select class="tbScenBipt-1" v-model="state.form.invoiceState" placeholder="请选择" >
              <el-option label="已报销" value="已报销" />
              <el-option label="未报销" value="未报销" />

            </el-select>
          </el-form-item>
          <!--          <el-form-item label="发票编号:">-->
          <!--            <el-input v-model="form.invoiceId" style="width: 300px"/>-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="消费内容:">-->
          <!--            <el-input v-model="form.applicat" style="width: 300px"/>-->
          <!--          </el-form-item>-->

          <el-form-item label="开票日期:">
            <el-col :span="11">
              <el-date-picker
                  v-model="state.form.invoiceOpendate"
                  type="date"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  placeholder="申请时间"
                  style="width: 300px"
              />
            </el-col>
          </el-form-item>







        </el-form>


        <span>————————————————————————————————————————————————————————————</span>
        <div class="tjj-3"> </div><br>




        <span>————————————————————————————————————————————————————————————</span>

      </div>




    </div>
  </el-scrollbar>
</template>

<script lang="ts" setup>
import {onBeforeMount, reactive, ref, toRefs,watch} from "vue";
import type {FormInstance, FormRules} from 'element-plus'
import axios from 'axios'
import {ElMessage} from "element-plus";
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'

const emit = defineEmits(['editSuccess']);
const propData = defineProps({
  edit:{
    type:Boolean,
    default:false
  },
  editForm:{
    type:Object,
    default:{
      invoiceType:'',
      invoiceNumber : '',
      invoiceSeller:'',
      invoiceMoney : '',
      invoiceState : '',
      invoiceId : '',
      invoiceOpendate : '',
    }
  }
})


const state = reactive({
  form:{
    invoiceType:'',
    invoiceNumber : '',
    invoiceSeller:'',
    invoiceMoney : '',
    invoiceState : '',
    invoiceId : '',
    invoiceOpendate : '',
  }
})

watch(()=>propData.editForm,()=>{
  state.form = propData.editForm
},{
  immediate:true,
  deep:true
})


const save =()=>{
  // http://localhost:1688/selectInvoice/selectAll

  axios.post("http://localhost:1688/selectInvoice/save",state.form).then(res=>{
    ElMessage({
      message: '添加成功',
      type: 'success',
    })
    console.log('res=>',res);
  })

}


const Edit = () =>{
  // form = propData.editForm
  axios.post("http://localhost:1688/selectInvoice/edit",state.form).then(res=>{
    // console.log('res=>',res);
    emit('editSuccess')
  })
}
const onSubmit = () => {
  if(!propData.edit) {
    save();
  }else {
    Edit()
  }
}



</script>

<style>
.vehicle_application{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.vehicleHead{
  text-align: center;
  color: #2DB7F5;
  font-size: 30px;
  /*margin-top: 50px;*/
  /*border: 1px solid black;*/
  width: 85%;
  height: 100px;
  line-height: 100px;
  display: flex;
  justify-content: center;
  background-color: #FFFFFF;
  border-radius:  20px;
}
.tjj-1{
  position: relative;
  left: 360px;
  margin: 0px 10px;

}
.tbScenBipt-1{
  width: 340px;

}
.flex{
  margin: 10px 200px;

}
.tjj-2{
  position: relative;
  left: 200px;
}
.tjj-4{
  margin: 30px 100px;
}
.tjj-3{
  font-size: 20px;
  margin: 10px 60px;
}
.vehicleForm{
  /*border: 1px solid black;*/
  width: 85%;
  height: 650px;
  background-color: #FFFFFF;
  border-radius:  20px;
  margin-top: 10px;
}
.vehicleTable{
  width: 85%;
  margin-top: 10px;
  border-radius:  20px;
}
</style>
